<template>
  <div class="uc-pagination">
    <span style="padding-right: 10px">共 {{ total }} 条</span>
    <el-pagination
      v-model:currentPage="newModelValue.pageNo"
      v-model:page-size="newModelValue.pageSize"
      :page-sizes="pageSizes"
      :background="background"
      :layout="`${sizes ? 'sizes,' : ''} prev, pager, next, jumper`"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script setup>
import { computed } from "vue";

const emits = defineEmits(["change", "update:modelValue"]);
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {
      return {
        pageNo: 1,
        pageSize: 20,
      };
    },
  },
  // 总条数
  total: {
    type: Number,
    default: 0,
  },
  // 是否有背景
  background: {
    type: Boolean,
    default: true,
  },
  // 是否可以切换size
  sizes: {
    type: Boolean,
    default: true,
  },
});
const pageSizes = [10, 20, 50, 100];
const newModelValue = computed({
  get() {
    return props.modelValue;
  },
  set(page) {
    upadtePage(page);
  },
});
const upadtePage = (params) => {
  emits("update:modelValue", params);
};
const handleCurrentChange = (pageNo) => {
  const params = {
    pageNo,
    pageSize: props.modelValue.pageSize,
  };
  emits("change", params);
};
const handleSizeChange = (pageSize) => {
  const params = {
    pageNo: 1,
    pageSize,
  };
  emits("change", params);
};
</script>

<style lang="scss" scoped>
.uc-pagination {
  display: flex;
  align-items: center;
}
:deep(.el-pager li) {
  padding: 0;
}
</style>
